<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/swiper.css" />
		<link rel="stylesheet" href="css/mint.css">
		<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
		 <script src="js/vue_resource.js"></script>
	</head>
		<script src="js/serverUrl.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/mint.js"></script>
		<script src="js/moment.js"></script>
		<style type="text/css">
			.conclusionContainer{
				display: flex;
				flex-direction: column;
				width: 100vw;
				background: white;
			}
			.detailTitle{
				width: 100vw;
				display: flex;
				justify-content: center;
				font-size: 18px;
				padding-top: 5px;
				padding-bottom: 5px;
			}
			
			.infoContainer{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-left: 15px;
				padding-right: 15px;
				font-size: 16px;
				padding-top: 5px;
				padding-bottom: 5px;
				border-top: 1px solid #e0e0e0;
			}
			.content{
				font-size: 14px;
				background-color: #f0f0f0;
				margin:0px 10px 10px 10px;
				padding: 5px;
				border-radius: 5px;
				white-space: pre-line;
			}

		</style>
	<body style="background-color: #f0f0f0;">
		<div id="app">
			<div class="conclusionContainer">
				<div class="detailTitle">{{trainingClass.realClassName}}</div>
				
				<div class="infoContainer"><span>培训编号</span> <span>{{trainingClass.professionalClassName}}</span></div>
				<div class="infoContainer"><span>培训日期</span> <span>{{trainingClass.startDate| formatDay}}</span></div>
				<div class="infoContainer" style="border-top: 0px solid #e0e0e0;"><span></span> <span>{{trainingClass.endDate| formatDay}}</span></div>
				<div class="infoContainer"><span>主办机构</span> <span>{{trainingClass.organizer}}</span></div>
			</div>
			
			<div class="conclusionContainer" style="margin-top: 15px;">
				<div class="infoContainer"><span>培训类别</span> <span>{{trainingClass.professionalClassType | type}}</span></div>
				<div class="infoContainer"><span>培训级别</span> <span>{{trainingClass.professionalClassLevel | level}}</span></div>
				<div class="infoContainer"><span>培训模式</span> <span>{{trainingClass.professionalClassMode | mode}}</span></div>
				<div class="infoContainer"><span>培训期数</span> <span>{{trainingClass.classOrder}}</span></div>
			</div>
			
			<div class="conclusionContainer" style="margin-top: 15px;">
				<div  class="infoContainer" @click.stop="toClassMate(trainingClass.professionalClassId)"><span>培训学员</span> <span><img class="arrow" src="img/right_arrow.png"/></span></div>
				<div  class="infoContainer" @click.stop="toCourse(trainingClass.professionalClassId)"><span>课程列表</span> <span><img class="arrow" src="img/right_arrow.png"/></span></div>
<!--				<div  class="infoContainer" @click.stop="toFileList()"><span>查看评价</span> <span><img class="arrow" src="img/right_arrow.png"/></span></div>-->
			</div>
			
		</div>
	</body>
	
	<script type="text/javascript">
		var app = new Vue({
		  el: '#app',
		  data:{
			  trainingClass: {

			  },
		  },
		  filters:{
			  mode (val) {
				switch(val){
					case 1:
						return "面授学习";
						break;
					case 2:
						return "在线学习";
						break;
					case 3:
						return "外派学习";
						break;
					case 4:
						return "组织活动";
						break;
				}  
			  },
			  type (val) {
					switch(val){
						case 1:
							return "岗位培训";
							break;
						case 2:
							return "技能培训";
							break;
						case 3:
							return "安全培训";
							break;
						case 4:
							return "素质培训";
							break;
					}  
			  },
			  level (val) {
				switch(val){
					case 1:
						return "晋能集团";
						break;
					case 2:
						return "二级公司";
						break;
					case 3:
						return "公司内训";
						break;
				}  
			  },
			  formatTime (val) {
                  if(val == null){
                      return ""
                  }
				return moment(val).format("HH:mm")  
			  },
			  formatDay (val) {
                  if(val == null){
                      return ""
                  }
				return moment(val).format("YYYY年MM月DD日")  
			  }
		  },
		  created() {
              window.getTrainingClass = this.getTrainingClass
		  },
		  methods:{
			  getTrainingClass (trainingClass){
                  this.trainingClass = trainingClass
              },
              toClassMate(professionalClassId) {
                  let params = {
                      professionalClassId:professionalClassId
                  }
                  WebViewJavascriptBridge.callHandler('toClassMate',params,function(response) {
                         
                  });
              },
              toCourse(professionalClassId) {
                  let params = {
                      professionalClassId:professionalClassId
                  }
                  WebViewJavascriptBridge.callHandler('toCourse',params);
              },
		  }
		})		
		</script>
</html>
